<template>
  <dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    @click = "dialogVisible = false"
    width="60%">
    <el-container class="main-right" style="background-color: rgb(243, 243, 244);">
      <el-main class="maintain-main" style="background-color: rgb(243, 243, 244);">
        <el-form
          label-width=""
          ref="Form"
          :model="query">
          <slot name="formBody"></slot>
        </el-form>
        <el-button type="primary" @click="loadTableData">{{$t("common.search")}}</el-button>
        <el-button @click="resetMethod('Form')">{{$t("common.reset")}}</el-button>
      </el-main>
      <el-footer style="height: auto;background-color: rgb(243, 243, 244);">
        <div class="row2">
          <el-row>
            <el-table
              ref="table"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <slot name="tableBody"></slot>
            </el-table>
          </el-row>
          <el-row>
            <el-button type="primary" @click="selectMethod">{{$t("common.select")}}</el-button>
            <el-button type="primary" @click="dialogVisible = false">{{$t("common.cancel")}}</el-button>
          </el-row>
          <!--<el-row>-->
          <!--<div class="pagination-container" style="text-align: right">-->
          <!--<el-pagination-->
          <!--layout="slot, prev, pager, next"-->
          <!--:total="pageInfo.totalRow"-->
          <!--prev-text="上一页"-->
          <!--next-text="下一页"-->
          <!--@size-change="findList"-->
          <!--@current-change="findList"-->
          <!--:current-page.sync="pageInfo.pageIndex"-->
          <!--:page-size="pageInfo.pageSize">-->
          <!--<span style="line-height: 30px;margin-right: 18px">{{pageInfo.pageSize}}条/页</span>-->
          <!--</el-pagination>-->
          <!--</div>-->
          <!--</el-row>-->
        </div>
      </el-footer>
    </el-container>
  </dialog>
</template>

<script>
  export default {
    name: 'pop-up-select',
    props: {
      // 弹出框名
      dialogTitle: {
        type: String,
        require: true
      },
      labelWidth: {
        type: String,
        default () {
          return '120px'
        }
      },
      // 控制dialog显示
      visible: {
        type: Boolean,
        default: function () {
          return false
        }
      },
      // 传入数据
      // data: {
      //   type: [Array, String],
      //   default () {
      //     return null
      //   }
      // },
      // 查询条件
      queryModel: {
        type: [Array, Object],
        require: true
      },
      // 传入api
      api: {
        type: Object,
        require: true
      },
      // 调用方法名
      methodName: {
        type: [String, Array],
        require: true
      }
    },
    data () {
      return {
        selectedRows: [],
        tableData: []
      }
    },
    computed: {
      dialogVisible: {
        get () {
          return this.visible
        },
        set (value) {
          this.$emit('update:visible', value)
        }
      },
      query: {
        get () {
          return this.queryModel
        }
      }
    },
    methods: {
      selectMethod: function () {
      },
      resetMethod: function (formName) {
        this.$refs[formName].resetFields()
      },
      handleSelectionChange (val) {
        this.selectedRows = val
      },
      loadTableData: function () {
        let $this = this
        this.api[this.methodName].then(res => {
          if (res && res.data) {
            $this.tableData = res.data
          } else {
            $this.error(res.errmesg)
          }
        })
      }
    }
  }
</script>

<style scoped>
  .maintain-header {
    background-color: #199ED8;
    text-align: left;
    font-size: 20px;
    color: #ffffff;
    line-height: 39px;
  }

  .maintain-main {
    background-color: #ffffff;
    color: rgb(51, 51, 51);
    line-height: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
  }

  .head-css {
    height: 39px !important;
    margin-bottom: 20px;
  }

  .text{
    text-align: right;
    margin-right: 50px;
    margin-top: 20px;
  }

  .width1 {
    width:350px;
  }

  .select_css {
    width:170px;
  }

  .row1 {
    background: #fff;
    border-radius: 6px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 13px;
    box-shadow: 1px 1px 3px rgba(0,0,0,.2);
    color: #333333;
  }
  .row2 {
    background: #fff;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 1px 1px 3px rgba(0,0,0,.2);
    min-height: 620px;
  }

  .common-table-header {
    background-color: #949494 !important;
    color: white;
  }

  .pagination-container {
    margin-top: 20px;
  }
  .el-form-item {
    margin-bottom: 0px;
  }
  .el-footer {
    padding: 10px;
  }
  .el-main {
    padding: 0px 20px 0px 20px;
  }
</style>
